<template>
    <div class="ordering" v-loading.fullscreen.lock="Loading">
        <div class="heading">用户列表</div>
        <div>
            <el-table :data="user_array" style="width: 100%">
                <el-table-column prop="time" label="注册时间" align="center" min-width="100" />
                <el-table-column prop="name" label="姓名" align="center" min-width="100" />
                <el-table-column label="头像" align="center" min-width="100">
                    <template #default="scope">
                        <el-image preview-teleported style="width: 40px; height: 40px"
                            :preview-src-list="[scope.row.head]" :src="scope.row.head" fit="cover" lazy></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center" min-width="100" />
                <el-table-column prop="position" label="职业" align="center" min-width="100" />
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="el-pagination">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentchange" />
        </div>
    </div>
</template>

<script>
import { reactive, onMounted, getCurrentInstance, toRefs, ref } from 'vue'

export default {
    setup () {
        const Loading = ref(true)
        const { proxy } = getCurrentInstance()
        onMounted(() => {
            userlist()
        })
        const oper_data = reactive({
            user_array: [], // 表格数据
            total: 0,     // 数据总条数
            page:0
        })
        async  function userlist(){
            try {
                const res = await new proxy.$request(proxy.$urls.m().pulluserlist + '?page=' + oper_data.page ).modeget()
                // console.log(res);
                oper_data.user_array = res.data.data.result
                oper_data.total = res.data.data.total
                Loading.value = false
                // console.log(oper_data);
            } catch (e) {
                new proxy.$tips('服务器发生错误', 'error').mess_age()
            }
        }

        // 分页触发事件
        function currentchange(e) {
            oper_data.page = e - 1
            userlist()
        }

        return { ...toRefs(oper_data), userlist, currentchange ,Loading}
    }
}
</script>

<style  scoped>

</style>